<template>
  <el-card class="movie-card" @click="movieInfo">
    <template #header>{{ movie.name }}</template>
    <div class="movie-image">
      <div v-if="movie.img_url">
        <img :src="movie.img_url" :alt="movie.name">
      </div>
      <div v-else class="image-placeholder">
        <el-icon><icon-picture /></el-icon>
      </div>
    </div>
    <div class="movie-info">
      <div class="info-item">
        <span class="label">类型：</span>
        <span class="value">{{ movie.type }}</span>
      </div>
      <div class="info-item">
        <span class="label">评分：</span>
        <span class="value">{{ movie.score }}</span>
      </div>
    </div>
  </el-card>
</template>

<script setup>
import { Picture as IconPicture } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import {ref} from 'vue'

const router = useRouter()
const props = defineProps(['movie', 'i'])
const grid_Area = ref(`card${props.i + 1}`)

const movieInfo = () => {
  console.log('跳转到电影详情页面')
  router.push({
    path: '/movieInfo',
    query: { "movie_id": props.movie.id },
  })
}
</script>

<style scoped>
.movie-card {
  width: 200px;
  height: 300px;
  margin: 20px;
  transition: transform 0.3s, box-shadow 0.3s;
  background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.movie-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(255, 77, 77, 0.3),
              0 0 15px rgba(255, 133, 51, 0.2);
  background: linear-gradient(135deg, #2d2d2d 0%, #1d1d1d 100%);
}

.movie-card :deep(.el-card__header) {
  background: linear-gradient(45deg, rgba(255, 77, 77, 0.1), rgba(255, 133, 51, 0.1));
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  padding: 12px;
}

.movie-image {
  height: 140px;
  overflow: hidden;
}

.movie-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.movie-card:hover .movie-image img {
  transform: scale(1.05);
}

.image-placeholder {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--el-fill-color-light);
  color: var(--el-text-color-secondary);
}

.movie-info {
  padding: 10px;
  background: linear-gradient(to bottom, rgba(42, 42, 42, 0.8), rgba(26, 26, 26, 0.8));
}

.info-item {
  margin: 5px 0;
  display: flex;
  justify-content: space-between;
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
}

.label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
}

.value {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
</style>
